<template>
    <div class="traffic">
        <div class="content serve_con" style="padding: 10px;">
            <div class="div_style">
                <img :src="contentDetail.photo" style="width: 100%;height: 100%;margin-bottom: 10px;">
            </div>
            <div div style="width: 100%;height: auto;font-size: 14px; margin-bottom: 10px;">

                <div style="width: 100%;height: 35px;line-height:35px;border-top: 1px solid #E8E8E8;border-bottom:1px solid #E8E8E8;">
                    <img style="width: 25px;vertical-align: middle;" src="/images/icon_strategy.png">
                    <span>
                        温馨提示
                    </span>
                </div>
                <div style="width: 100%;height: auto;margin-top: 20px;margin-bottom: 20px;">
                     <span v-html="contentDetail.content">
                        {{contentDetail.content}}
                    </span>
                </div>

                <!--<div style="width: 100%;height: 50px;line-height:50px;border-top: 1px solid #E8E8E8;border-bottom:1px solid #E8E8E8;">
                    <img style="width: 25px;vertical-align: middle;" src="/images/icon_map.png">
                    <a class="tab-item " @click="goToView('/baiduGps')" style="text-decoration: none;">
                        <span>
                            百度地图
                        </span>
                    </a>
                </div>
                <div style="width: 100%;height: 50px;line-height:50px;border-bottom:1px solid #E8E8E8;">
                    <img style="width: 25px;vertical-align: middle;" src="/images/icon_gd_gps.png">
                    <a class="tab-item " href="https://www.amap.com/place/B0FFIIJZ6B" style="text-decoration: none;">
                        <span>
                            高德地图
                        </span>
                    </a>
                </div>-->
                <!--border-bottom:1px solid #E8E8E8;-->
                <div @click="tencentGps()" style="width: 100%;height: 50px;line-height:50px; border-top: 1px solid rgb(232,232,232);border-bottom: 1px solid rgb(232,232,232);">
                    <img style="width: 25px;vertical-align: middle;" src="/images/icon_gd_gps.png">
                    <span>
                        地图导航
                    </span>
                </div>

                <div style="width: 100%;height: 50px;line-height:50px;border-bottom: 1px solid rgb(232,232,232);">
                    <img style="width: 25px;vertical-align: middle;" src="/images/icon_gego.png">
                    <span>
                        地理信息
                    </span>
                </div>
            </div>
        </div>

        <!--后添加  style="padding: 10px;"-->
        <div class="content serve_con">
            <div div style="width: 100%;height: auto;font-size: 14px; margin-bottom: 10px;">
                <!--<div style="width: 100%;height: 35px;line-height:35px;border-top: 1px solid #E8E8E8;border-bottom:1px solid #E8E8E8;">-->
                <!--<img style="width: 25px;vertical-align: middle;" src="/images/icon_traffic2.png">-->
                <!--<span>-->
                <!--交通信息-->
                <!--</span>-->
                <!--</div>-->
                <!--<div style="width: 100%;height: auto;margin-top: 20px;">-->
                <!--<span v-html="contentDetail.content">-->
                <!--{{contentDetail.content}}-->
                <!--</span>-->
                <!--</div>-->
                <!--margin-top: 20px;-->

                <div class="baidu-map" v-show="showMap">
                    <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="handler">
                        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
                        <bm-marker :position="center" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
                    </baidu-map>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {mapGetters} from 'vuex'
    import wx from 'weixin-js-sdk'
    import Cookies from 'js-cookie'
    import {isDev} from "../../utils/tools";
    import {Toast} from 'vant';
    import BaiduMap from 'vue-baidu-map'
    Vue.use(BaiduMap, {
        // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
        ak: 'DWNotd3kMKh7VsH7qPG5ypbOk0kUwQQB'
    })
    export default {
        name: "Traffic",
        components: {},
        data() {
            return {
                menuId: '',
                contentDetail: {},
                count: 1,

                menuId2: 1,
                showMap:true,
                contentDetail2: {},
                count2: 1,
                center: {lng: 0, lat: 0},
                zoom: 17

            }
        },
        beforeMount(){
            this.fetchStrategyDetail2()
        },
        mounted() {
            this.token = Cookies.get("token")
            this.menuId = 5
            isDev && console.log(this.token);
            this.fetchStrategyDetail()



        },
        computed: {
            ...mapGetters(['wuBdMapAk']),
        },
        methods: {
            fetchStrategyDetail() {
                this.$api.contentSet.contentSetDetail({id: this.menuId}).then(res => {
                    // isDev&&console.log(res);
                    if (res.code == 0) {
                        isDev && console.log(res.data);
                        this.contentDetail = res.data
                    } else {
                        console.log(res);
                    }
                }).catch(error => {
                    console.log(this.error);
                })
            },
            goToView(path) {
                this.$router.push(path)
            },
            tencentGps() {
                wx.openLocation({
                    latitude: 22.959567,
                    longitude: 113.141714,
                    name: '佛山国际体育文化演艺中心',
                    address: '佛山市顺德区百顺道与裕和路交叉口东200米',
                    scale: 16,
                    infoUrl: 'https://baike.baidu.com/item/%E4%BD%9B%E5%B1%B1%E5%9B%BD%E9%99%85%E4%BD%93%E8%82%B2%E6%96%87%E5%8C%96%E6%BC%94%E8%89%BA%E4%B8%AD%E5%BF%83/22641369?fr=aladdin'
                })
            },
            fetchStrategyDetail2() {
                this.$api.contentSet.contentSetDetail({id: this.menuId2}).then(res => {
                    if (res.code == 0) {
                        isDev && console.log(res.data);
                        this.contentDetail2 = res.data
                    } else {
                        console.log(res);
                    }
                }).catch(error => {
                    console.log(this.error);
                })
            },
            handler ({BMap, map}) {
                console.log(BMap, map)
                setTimeout(()=>{
                    // this.showMap=true
                    this.center.lng = this.contentDetail2.longitude
                    this.center.lat =this.contentDetail2.latitude
                },500)
            }
        }
    }
</script>

<style lang="less" scoped>
    @import "../../assets/less/base";

    .traffic {
        .icon-title {
            color: #627e94;
            font-size: 17px;
        }
        .tab-item {
            color: @main-theme-color;
        }
        .baidu-map {
            .bm-view {
                width: 100%;
                height: 300px;
            }
        }
    }


</style>
